<template>
<el-table :data="tableData" stripe height="597">
  <el-table-column type="selection"></el-table-column>
  <el-table-column label="序号" type="index"></el-table-column>
  <el-table-column label="用户ID" prop="uid"></el-table-column>
  <el-table-column label="用户名称" prop="uname"></el-table-column>
  <el-table-column label="用户性别" prop="sex" :formatter="formateSex"></el-table-column>
  <el-table-column label="用户生日" prop="birth" :formatter="formateBirth"></el-table-column>
  <el-table-column label="用户权限" prop="keyid" :formatter="formateKey"></el-table-column>
  <el-table-column fixed="right"label="操作" width="300">
    <template slot="header" slot-scope="scope">
          <el-button type="success" @click="showaddvisible = true"><router-link to="/user/adduser"></router-link>添加</el-button>
          <el-dialog title="添加用户" :visible="showaddvisible" :modal="false">
            <AddUser></AddUser>
          </el-dialog>
    </template>
    <template slot-scope="scope">
        <el-button size="mini" type="info" plain>查看</el-button>
        <el-button size="mini" type="primary" plain>编辑</el-button>
        <el-button size="mini" type="warning" plain @click="DeleteUser(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
</template>

<script setup>
import AddUser from './AddUser.vue';
import axios from 'axios';
import Vue, { onMounted, onUpdated, provide, ref } from 'vue';
import { Message, MessageBox } from 'element-ui';
const tableData = ref([])
onMounted(() =>{
  axios.get("http://localhost:8088/user").then((response) =>{
  tableData.value = response.data
})
})
const formateBirth = (row)=>{
  const birth = row.birth
  const formateBirth = new Date(birth).toLocaleDateString();
  return formateBirth
}
const formateSex = (row)=>{
  const sex = row.sex
  const formateSex = (sex===1)?"男":"女"
  return formateSex
}
const formateKey = (row)=>{
  const keyid = row.keyid
  const formateKey = (keyid===0)?"管理员":"用户"
  return formateKey
}
const DeleteUser = (row)=>{
  MessageBox.confirm("此操作将永久删除该用户, 是否继续?","提示",{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type:'warning'
  }).then(() =>{
    axios.delete(`http://localhost:8088/user/${row.uid}`).then(() =>{
      Message({
      type:'success',
      message:"删除成功"
    })
    axios.get("http://localhost:8088/user").then((response) =>{
      tableData.value = response.data
    })
    })
  }).catch(() => {
    Message({
      type:'info',
      message:"取消操作"
    })
  })
}
const showaddvisible = ref(false)
provide('showaddvisible',showaddvisible)
provide('tableData',tableData)
</script>

<style>

</style>